<template>
  <view>
    <u-navbar
      title="我的收益明细"
      placeholder
      titleStyle="color:white"
      leftIconColor="#fff"
      auto-back
      bgColor="#FF7540"
    >
    </u-navbar>
    <view class="detail_content">
      <view class="small_group" v-for="(item, index) in incomeData" :key="index">
        <view class="l_user z_user">
          <view class="l_img">
            <img :src="item.avatar" alt="">
          </view>
          <view class="l_infor z_infor">
            <view class="name">{{ item.nickname }}</view>
            <view class="fisih_text">{{ item.create_time.split(' ')[0] }}</view>
          </view>
        </view>
        <!-- <view class="fisih_text">已完成{{item.order_num}}单</view> -->
        <view class="r_price">
          <view class="price">{{ (item.amount) }}</view>
          <view class="p_text">创收总额(元)</view>
        </view>
      </view>
      <view class="more_text">{{ more_text }}</view>
    </view>
  </view>
</template>

<script setup>
import {onLoad, onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";
import {ref} from "vue";
import {getIncomeDetailsAPI} from "../../services/makeMoney";

const incomeData = ref()
const page = ref(1)
const limit = ref(10)
const _len = ref(0)
const more_text = ref('上拉加载更多……')

onLoad(() => {
  handleIncome()
})
onReachBottom(() =>{
  if(_len.value < limit.value) {
    // page.value = 1
  } else {
    page.value++
    handleIncome()
  }
})
onPullDownRefresh(() =>{
  page.value = 1
  handleIncome()
})
const handleIncome = async () => {
  const res = await getIncomeDetailsAPI(limit.value,page.value)
  _len.value = res.result.length
  if(page.value === 1) {
    incomeData.value = res.result
  } else {
    incomeData.value = [...incomeData.value, ...res.result]
  }
  if(_len.value === 0) {
    more_text.value = '暂无数据~'
    return
  }
  if(_len.value < limit.value) {
    more_text.value = '没有更多数据~'
  } else {
    more_text.value = '上拉加载更多……'
  }
}
</script>
<style lang="scss" scoped>
page {
  background-color: #F6F6F6;
  height: 100%;
}
.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #FC5722, #FD6429, #FF7540);
  color: rgb(255,117,64);
}
</style>
<style lang="scss" scoped>
image {
  width: 100%;
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
}

.sy_information {
  width: 100%;
  height: 400rpx;
  background: url('https://lsz.lszbg.com/imgs/group/top_bg.png') no-repeat top center / 100% 100%;
  box-sizing: border-box;
  padding: 0 32rpx;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  z-index: 1;

  .return_icon {
    width: 28rpx;
    height: 49rpx;
    margin-top: 10rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .center_mag {
    text-align: center;
    color: #fff;

    .text {
      font-size: 28rpx;
      margin-top: 10rpx;
    }

    .sy_num {
      font-size: 40rpx;
      font-weight: bold;

      text {
        font-size: 28rpx;
      }
    }
  }

  .r_sy {
    width: 76rpx;
    height: 76rpx;
  }
}

.detail_content {
  background: linear-gradient(179deg, #FFFFFF 0%, #F1F1F1 100%);
  border-radius: 50rpx 50rpx 0 0;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  padding: 30rpx;

  .day_tabs {
    border-bottom: 1rpx solid #E6E6E6;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 20rpx;

    text {
      position: relative;
      margin-right: 92rpx;
      font-size: 36rpx;
      color: #888;

      &:after {
        content: '';
        display: inline-block;
        width: 144rpx;
        height: 8rpx;
        background-color: #fff;
        border-radius: 20rpx;
        position: absolute;
        bottom: -20rpx;
        left: 0;
        right: 0;
        margin: auto;
      }

      &.cur {
        color: #FC5722;

        &:after {
          background: linear-gradient(90deg, #FC754A 0%, #FDC434 100%);
        }
      }
    }
  }
}

.more_text {
  font-size: 28rpx;
  color: #B1B1B1;
  text-align: center;
  margin: 156rpx 0;
}

.small_group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50rpx;
  border-bottom: 2rpx dashed #DCDCDC;
  box-sizing: border-box;
  padding-bottom: 40rpx;

  .l_user {
    display: flex;
    align-items: center;
    width: 75%;

    .l_img {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 26rpx;
    }

    .l_infor {
      width: 70%;

      .name {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .fisih_text {
        font-size: 24rpx;
        color: #888;
        margin-top: 5rpx;
      }

      &.z_infor {
        width: 70%;
      }
    }

    &.z_user {
      width: 70%;
    }
  }

  .fisih_text {
    font-size: 24rpx;
    color: #888;
    margin-top: 5rpx;
  }

  .r_price {
    text-align: right;

    .price {
      font-size: 28rpx;
      color: #FC4106;
      font-weight: bold;
    }

    .p_text {
      font-size: 24rpx;
      color: #888;
    }
  }
}
</style>
